import axios from "axios";
import { fromJS } from "immutable";
import * as constants from "./constants";

// 这里变成一个 actionCreator，返回action
const changeHomeData = (data) => ({
  type: constants.CHANGE_HOME_DATA,
  payload: data
});

const addHomeList = (list, nextPage) => ({
  type: constants.ADD_ARTICLE_LIST,
  payload: {
    list: fromJS(list),
    nextPage
  }
})

export const changeBackTopShow = (show) => ({
  type: constants.CHANGE_BACKTOP_SHOW,
  payload: show
})

// 通过使用指定的 middleware(redux-thunk)，action 创建函数除了返回 action 对象外还可以返回函数。
// 这时，这个 action 创建函数就成为了 thunk

// 当 action 创建函数返回函数时，这个函数会被 Redux Thunk middleware 执行。
// 这个函数并不需要保持纯净；它还可以带有副作用，包括执行异步 API 请求。这个函数还可以 dispatch action
export const getHomeInfo = () => {
  return (dispatch) => {
    axios.get('/api/home.json')
    .then(response => {
      const { data: { data } } = response;
      dispatch(changeHomeData(data));
    },
    // 不要使用 catch，因为会捕获在 dispatch 和渲染中出现的任何错误，导致 'Unexpected batch number' 错误
    error => console.log('getHomeInfo error')
    )
  }
  
}

export const getMoreList = (page) => {
  return (dispatch) => {
    axios.get(`/api/homeList.json?page=${page}`)
    .then(response => {
      const { data: { data } } = response;
      dispatch(addHomeList(data, page))
    },
    error => console.log('getMoreList error')
    )
  }
}